<template>
	<view class="homeContent">
		<Tabs></Tabs>
		<view class="content">
			<view class="topBox">
				<view class="title">首页</view>
				<image src="../../static/images/sousuo.png"></image>
			</view>
			<view class="bottomBox">
				<view class="leftBox">
					<view class="left_top">
						<view class="items">
							<view class="title">设备总数</view>
							<view class="num">150</view>
						</view>
						<view class="items">
							<view class="title">企业总数</view>
							<view class="num">50</view>
						</view>
					</view>
					<view class="topBox">
						<view class="title">最新企业</view>
						<image src="../../static/images/sousuo.png"></image>
					</view>
					<scroll-view scroll-y="true" class="list-index">
						<view class="left_bottom">
							<view class="lists" v-for="item in list">
								<view class="title">{{item.name}}</view>
								<view class="cont">
									<view class="iconBox">
										<image src="../../static/images/video.png"></image>
									</view>
									<text class="num1">{{item.num}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="rightBox"></view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import Tabs from '../../components/tabs.vue'
	export default {
		data() {
			return {
				list:[
					{
						id:1,
						name:'简柏特有限公司',
						num:15
					},
					{
						id:2,
						name:'柏特有限公司',
						num:15
					},
					{
						id:3,
						name:'特有限公司',
						num:15
					}
				]
			}
		},
		methods: {
			
		},
		components:{
			Tabs
		}
	}
</script>

<style lang="less" scoped>
	.homeContent{
		width: 100%;
		height: 100%;
		display: flex;
		background: #d4e7f1;
		.content{
			width: 100%;
			padding: 20px 20px;
			box-sizing: border-box;
			.topBox{
				display: flex;
				.title{
					flex: 1;
					font-size: 20px;
					color: #175aaa;
				}
				image{
					width: 20px;
					height: 20px;
				}
				
			}
			
			.bottomBox{
				width: 100%;
				display: flex;
				.leftBox{
					flex: 1;
					padding-right: 20px;
					box-sizing: border-box;
					.left_top{
						width: 100%;
						display: flex;
						padding-top: 20px;
						box-sizing: border-box;
						.items{
							width: 120px;
							height: 80px;
							margin-right: 20px;
							background:#e3f2f6;
							border-radius: 10px;
							padding: 20px;
							box-sizing: border-box;
							.title{
								font-size: 12px;
								color: #aaaaaa;
							}
							.num{
								font-size: 18px;
								color: #175aaa;
								font-weight: 700;
							}
						}
					}
					.topBox{
						padding-right: 20px;
						box-sizing: border-box;
						margin-top: 10px;
						.title{
							font-size: 16px;
						}
					}
					.list-index{
						height:calc(100vh - 60px);
					}
					.left_bottom{
						width: 100%;
						background: #e3f2f6;
						border-radius: 10px;
						padding: 20px 10px;
						box-sizing: border-box;
						.lists{
							display: flex;
							justify-content: space-between;
							line-height: 40px;
							.title{
								font-size: 13px;
								color: #175aaa;
								
							}
							.cont{
								width: 80px;
								display: flex;
								margin-top: 5px;
								justify-content: center;
								position: relative;
								.iconBox{
									width: 26px;
									height: 26px;
									background: #0b84ca;
									border-radius: 50%;
									position: relative;
									image{
										width: 16px;
										height: 16px;
										position: absolute;
										top: 50%;
										left: 50%;
										transform: translate(-50%,-50%);
									}
								}
								.num1{
									font-size: 12px;
									color: #0b85ca;
									// text-align: top;
									position: absolute;
									top: -7px;
									right: 7px;
								}
							}
						}
					}
				}
				
				.rightBox{
					flex: 1;
					background: pink;
				}
			}
		}
	}
</style>
